<template>
    <div id="carousel" :carousel = 'carousel'>
    <div class="carousel-inner">
        <span v-for="item in carousel">{{item}}</span>
    </div>
    </div>
  
</template>

<script setup>
import { reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";

let carousel = reactive([])
for (let i = 0; i < 5; i++){
    let str = 'burring online';
    if (Math.ceil(Math.random() * i * 100) > 0) {
        str = str + `${Math.ceil(Math.random() * i * 100)}`
       carousel.push(str)
    }
}
onMounted(() => {
    let root = document.querySelector('#carousel');
    let root_son = document.querySelector('.carousel-inner');
    let children = document.querySelector('.carousel-inner').children
    let copyfirst = children[0].cloneNode(true);
    let copylast = children[children.length - 1].cloneNode(true)
    root_son.insertBefore(copylast,children[0]);
    root_son.appendChild(copyfirst)
    console.log(root_son.clientWidth, root_son.children.length);
    let imgwidth = root_son.clientWidth/root_son.children.length
    let speed = 1
    setInterval(function () {
        root_son.style.left = -(speed++) +'px';
        // console.log(root_son.children.length - 1, imgwidth);

        if (speed > (root_son.children.length - 1) * imgwidth) {
            root_son.style.left = imgwidth + 'px';
            // console.log(root_son.style.left);
            return 
        }
    },20)
})

</script>

<style lang="scss">
#carousel{
    width: 300px;
    border: 1px solid cornflowerblue;
    border-radius: 10px;
    position: relative;
    height: 30px;
    overflow: hidden;
    .carousel-inner{
        position: absolute;
        left: 0;
        display: flex;
        align-items: center;
        height: 100%;
        span{
            line-height: 30px;
            flex-shrink: 0;
            padding: 10px;
        }
    }

}

</style>